<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Insert title here</title>

    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
    <script type="text/javascript">
      var stompClient = null;

      function setConnected(connected) {
        document.getElementById("connect").disabled = connected;
        document.getElementById("disconnect").disabled = !connected;
        document.getElementById("conversationDiv").style.visibility = connected ? "visible" : "hidden";
        document.getElementById("response").innerHTML = "";
      }

      function connect() {
        // var url = "http://xiyb-p1:18089/g3_witness/gdw/stomp";
        // var url = "http://10.0.204.61:18087/g3_order/stomp";
        // var url = "http://10.0.204.143:8087/g3_order/stomp";
        var url = "http://10.0.204.143:18880/gdw/stomp";

        var socket = new SockJS(url);
        stompClient = Stomp.over(socket);
        stompClient.connect({}, function (frame) {
          // setConnected(true);
          console.log("Connected: " + frame);
          stompClient.subscribe("/ws/witness/info/8a804c1c7d2baf1d017d2c69334c0003", function (greeting) {
            showGreeting(greeting.body);
          });
        });
      }

      function disconnect() {
        if (stompClient != null) {
          stompClient.disconnect();
          // setConnected(false);
          console.log("Disconnected");
        }
      }

      function sendName() {
        var value = document.getElementById("name").value;
        stompClient.send("/app/pbDeskTop/event", {}, value);
      }

      function showGreeting(message) {
        var response = document.getElementById("response");
        var p = document.createElement("p");
        p.style.wordWrap = "break-word";
        p.appendChild(document.createTextNode(message));
        response.appendChild(p);
      }
    </script>
  </head>
  <body class="easyui-layout">
    <div>
      <div>
        <button id="connect" onclick="connect();">Connect</button>
        <button id="disconnect" onclick="disconnect();">Disconnect</button>
      </div>
      <div id="conversationDiv">
        <p id="response" style="border: black; width: 500px; border-style: dashed"></p>
      </div>

      <p>
        <textarea id="name" rows="5">
{"data":{"expertId":"4028fccc7b3eb740017b3f633dfc0002"},"appEvent":"ONLINE"}</textarea
        >
      </p>
      <button id="sendName" onclick="sendName();">Send</button>
    </div>
  </body>
</html>
